<template>
	<div class="list-container">
        <TmallNavBar>
            <template #left><i class="icon iconfont icon-zuojiantou"></i></template>
            <template #default>商品列表</template>
            <template #right><i class="icon iconfont icon-shouye1" @click="$router.push({path: '/'})"></i></template>
        </TmallNavBar>

		<!-- 搜索框 -->
        <div class="search">
            <div class="input" @click="$router.push('/goodsSearch')">
                <span class="icon-search iconfont icon-sousuo">{{queryParams.keyword ? queryParams.keyword : '搜索商品'}}</span>
            </div>
        </div>

        <!-- 排序、筛选 -->
        <div class="sort-filter-box">
            <van-dropdown-menu ref="menuRef" active-color="#27BA9B">
                <van-dropdown-item @change="changeFilter" v-model="filterValue" :options="filters"/>
                
                <van-dropdown-item @change="changeSort" v-model="sortValue" :options="sorts"/>

                <van-dropdown-item title="筛选" ref="complexFilterRef">
                    <van-cell-group inset>
                        <!-- <div class="complex-filter-price-box"> -->
                            <van-field type="number" label-width="80" v-model="minPrice" label="自定最低价" placeholder="请输入自定最低价" />
                            <van-field type="number" label-width="80" label="自定最高价" v-model="maxPrice" placeholder="请输入自定最高价" />
                        <!-- </div> -->
                        <van-divider />
                    </van-cell-group>
                    <div class="complex-filter-btn-box">
                        <van-button class="btn" color="#bbb" type="primary" round @click="onReset">
                            重置
                        </van-button>

                        <van-button class="btn" color="#27BA9B" type="primary" round @click="onConfirm">
                            确认
                        </van-button>
                    </div>
                </van-dropdown-item>
            </van-dropdown-menu>
        </div>

        <!-- 骨架屏 -->
        <van-skeleton v-if="isShowSkeleton">
            <template #template>
                <div class="skeleton-goods-list">
                    <div class="skeleton-goods-item" v-for="(item) in skeletonLength" :key="item" >
                        <div class="image-box" style="margin-bottom: 5px;">
                            <van-skeleton-image class="thumb" style="width: 100%;"/>
                        </div>
                        <div>
                            <van-skeleton-paragraph style="height: 30px;margin-bottom: 10px;"/>
                            <div class="skeleton-price-box">
                                <van-skeleton-paragraph row-width="40%"/>
                                <van-skeleton-paragraph row-width="40%"/>
                            </div>
                            <van-skeleton-paragraph row-width="40%" style="float: right;margin-top: 10px;"/>
                        </div>
                    </div>
                </div>
            </template>
        </van-skeleton>

        <span>{{ domHeight }} {{ goodsListHeight }}</span>

        <!-- 商品数据 -->
        <van-pull-refresh
            :style="domHeight > goodsListHeight ? 'height: '+(domHeight-18)+'px;': ''"
            v-model="refreshing"
            @refresh="onRefresh"
        >
            <van-list
                ref="goodsListRef"
                v-model:loading="loading"
                :finished="finished"
                :finished-text="queryParams.page_size < total ? '我也是有底线的~' : ''"
                @load="onLoadMore"
            >

                <div>
                    <!-- 商品数据 -->
                    <div class="goods-list" v-if="goodsList.length > 0"
                        :style="queryParams.page_size >= total ? 'margin-bottom: 10px;' : ''"
                    >
                        <template v-for="item in goodsList" :key="item.goods_id">
                            <TmallGoodsItem :goods="item" />
                        </template>
                    </div>

                    <!-- 空数据 -->
                    <div class="blank" v-else>
                        <van-image :src="blankImage" class="image" />
                        <span class="text">没有找到您想要的商品哟</span>
                        <van-button class="button" to="/">去首页看看</van-button>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>

        <!-- 返回顶部组件 -->
        <van-back-top right="5vw" bottom="5vh" />
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from "vue"
import { reqGetGoodsListAPI } from "@/apis/goods"
import { useRoute} from 'vue-router'
import { showToast } from "vant"
import blankImage from '@/assets/images/blank.png'


// 路由
const route = useRoute()

const goodsListRef = ref()
const domHeight = ref('')
const goodsListHeight = ref(0)
nextTick(()=>{
    domHeight.value = document.documentElement.clientHeight;
})




// --------------------- 获取商品列表功能开始 ---------------------
const skeletonLength = ref(20)

// 加载中
const loading = ref(false)

// 完成
const finished = ref(false)

// 定义商品列表
const goodsList = ref([])

// 商品数量
const total = ref(0)

// 请求参数
const queryParams = reactive({
	keyword: '',
	cid: 0,
	brand_id: 0,
	min_price: '',
	max_price: '',
	sort_field: 'goods_id',
	sort_mode: 'desc',
    is_hot: 'all',
    is_new: 'all',
	page: 1,
	page_size: 20
})

// 请求商品数据
const getGoodsList = async () => {
	if (finished.value == true) {
		return
	}

	loading.value = true

	// 请求数据
	const result = await reqGetGoodsListAPI(queryParams)
	let goodsItems = result.data.goods != null ? result.data.goods : []
	goodsList.value.push(...goodsItems)
    total.value = result.data.total
	if (queryParams.page < result.data.page_total) {
		queryParams.page++
	} else {
		finished.value = true
	}

	loading.value = false
    refreshing.value = false

    await nextTick(()=>{
        console.log('goodsListHeight =', goodsListRef.value.$el.clientHeight);
        console.log('domHeight =', domHeight.value);
        goodsListHeight.value = goodsListRef.value.$el.clientHeight
    })
}
// --------------------- 获取商品列表功能结束 ---------------------





// --------------------- 商品列表排序功能开始 ---------------------
// 排序值
const sortValue = ref(0)

// 排序条件
const sorts = ref([
    { text: '默认排序', value: 0 },
    { text: '价格由低到高', value: 1 },
    { text: '价格由高到低', value: 2 },
    { text: '销量排序', value: 3 },
    { text: '点赞排序', value: 4 },
    { text: '收藏排序', value: 5 },
])

const changeSort = async (value) => {
    if (value == 1) { // 价格由低到高
        queryParams.sort_field = 'price'
        queryParams.sort_mode = 'asc'
    } else if (value == 2) { // 价格由高到低
        queryParams.sort_field = 'price'
        queryParams.sort_mode = 'desc'
    } else if (value == 3) { // 销量排序
        queryParams.sort_field = 'sales_num'
        queryParams.sort_mode = 'desc'
    } else if (value == 4) { // 点赞排序
        queryParams.sort_field = 'like_num'
        queryParams.sort_mode = 'desc'
    } else if (value == 5) { // 收藏排序
        queryParams.sort_field = 'collect_num'
        queryParams.sort_mode = 'desc'
    } else {
        queryParams.sort_field = 'goods_id'
	    queryParams.sort_mode = 'desc'
    }

    queryParams.page = 1
	goodsList.value = []

    finished.value = false

    isShowSkeleton.value = true
	await getGoodsList()

    // 置顶
    window.scrollTo(0,0)

    isShowSkeleton.value = false
}
// --------------------- 商品列表排序功能结束 ---------------------





// -------------------- 商品列表筛选功能开始 ----------------------
// 筛选值
const filterValue = ref(0)

// 筛选条件
const filters = ref([
    { text: '全部商品', value: 0 },
    { text: '新款商品', value: 1 },
    { text: '热门商品', value: 2 },
])

const changeFilter = async (value) => {
    // 重置商品列表参数
    queryParams.brand_id = 0
	queryParams.min_price = ''
	queryParams.max_price = ''
	queryParams.sort_field = 'goods_id'
	queryParams.sort_mode = 'desc'
    queryParams.is_hot = 'all'
    queryParams.is_new = 'all'
	queryParams.page = 1
	goodsList.value = []
    
    if (value == 1) { // 新款商品
        queryParams.is_new = 1
    } else if (value == 2) { // 热门商品
        queryParams.is_hot = 1
    }

    finished.value = false

    isShowSkeleton.value = true
	await getGoodsList()

    // 置顶
    window.scrollTo(0,0)

    isShowSkeleton.value = false
}
// -------------------- 商品列表筛选功能结束 ----------------------





// ------------------ 商品列表复杂筛选功能开始 --------------------
const complexFilterRef = ref()

// 自定最小价
const minPrice = ref('')

// 自定最大价
const maxPrice = ref('')

// 确认
const onConfirm = async () => {
    // 最低价
    if (minPrice.value != '') {
        queryParams.min_price = parseInt(minPrice.value) * 100
    }

    // 最高价
    if (maxPrice.value != '') {
        if (minPrice.value == '') {
            queryParams.min_price = 0
        }
        queryParams.max_price = parseInt(maxPrice.value) * 100
    }

    // 判断价格
    if (queryParams.min_price > queryParams.max_price) {
        showToast('最低价不能大于最高价!')
        return false
    }

    complexFilterRef.value.toggle()
    finished.value = false
    
    // 重置商品列表参数
    queryParams.page = 1
	goodsList.value = []

    isShowSkeleton.value = true
	await getGoodsList()

    // 置顶
    window.scrollTo(0,0)
    
    isShowSkeleton.value = false
}

// 重置
const onReset = () => {
    minPrice.value = ''
    queryParams.min_price = ''

    maxPrice.value = ''
    queryParams.max_price = ''
}
// ------------------ 商品列表复杂筛选功能结束 --------------------





// 是否显示骨架屏
const isShowSkeleton = ref(false)

// 是否挂载
const isMounted = ref(false)

onMounted(() => {
	queryParams.cid = route.query.cid != undefined ? route.query.cid : 0
	queryParams.keyword = route.query.keyword != undefined ? route.query.keyword : ''
    isMounted.value = true
})




// --------------------- 加载更多功能开始 ---------------------
const onLoadMore = async () => {
    // 当挂载时显示骨架屏
    if (isMounted.value) {
        isShowSkeleton.value = true
    }
	await getGoodsList()
    isMounted.value = false
    isShowSkeleton.value = false
}
// --------------------- 加载更多功能结束 ---------------------





// ---------------------下拉刷新功能开始 ---------------------
const refreshing = ref(false)
const onRefresh = async () => {

    refreshing.value = true
    finished.value = false
    isShowSkeleton.value = true

	queryParams.page = 1
    goodsList.value = []

    await getGoodsList()
    isShowSkeleton.value = false
}
// ---------------------下拉刷新功能结束 ---------------------
</script>


<style scoped lang="scss">
.van-tabs__wrap {
    position: fixed;
    z-index: 100;
    width: 100%;
}

// 骨架屏
.skeleton-goods-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    margin-top: 140px;
    width: 100%;
    .skeleton-goods-item {
        width: 48%;
        padding: 10px;
        margin-top: 10px;
        border-radius: 5px;
        background-color: #fff;
        .image {
            width: 154px;
            height: 154px;
        }
        .skeleton-price-box {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
        .name {
            height: 30px;
            font-size: 13px;
        
            overflow:hidden;
            text-overflow:ellipsis;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2;
        }
        .price {
            margin-top: 8px;
            line-height: 1;
            color: #cf4444;
            font-size: 15px;
        }
        .symbol {
            font-size: 70%;
        }
        .decimal {
            font-size: 70%;
        }
    }
}
.list-container {
    display: flex;
    flex-direction: column;
    background-color: ghostwhite;

    // 搜索商品盒子
    .search {
        margin-top: 35px;
        padding: 10px;
        background-color: #27BA9B;
        border-bottom: 1px solid gainsboro;
        position:fixed;
        width: 100%;
        z-index: 100;
        .input {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 32px;
            padding-left: 13px;
            color: #8b8b8b;
            font-size: 14px;
            border-radius: 16px;
            background-color: #f3f4f4;
            margin-top: 5px;
        }
        .icon-search {
            &::before {
                margin-right: 5px;
            }
        }
    }

    .sort-filter-box {
        margin-top: 93px;
        position:fixed;
        width: 100%;
        z-index: 100;
        .complex-filter-price-box {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .complex-filter-btn-box {
            display: flex;
            justify-content: space-between;
            padding: 15px 25px;
            .btn {
                height: 30px;
                width: 150px;
            }
        }
    }

    .goods-list {
        display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		padding: 0 10px;
        margin-top: 120px;
        width: 100%;
    }
    // 空状态
    .blank {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 100vh;
        .image {
            width: 200px;
            height: 141px;
        }
        .text {
            color: #444;
            font-size: 13px;
            margin: 10px 0;
        }
        .button {
            width: 120px !important;
            height: 30px;
            line-height: 30px;
            margin-top: 10px;
            font-size: 13px;
            border-radius: 30px;
            color: #fff;
            background-color: #27ba9b;
        }
    }
}
</style>
